<template>
  <div class="seek-box">
    <div class="seekbox">
    <h2 @click="ite">取消</h2>
    </div>
    <div class="sekbox-sai">
      <ul>
        <li v-for="item in list" :key="item.id">
          <h2>{{item.name}}</h2>
          <van-image
            width="3rem"
            height="2rem"
            lazy-load
            :src="item.album.artist.img1v1Url"
          />
          <p>{{item.alias[0]}}</p>
          <p>{{item.album.name}}</p>
          <div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getSearch } from '@/api'
import Vue from 'vue'
import { Image as VanImage, Lazyload } from 'vant'
Vue.use(Lazyload)
Vue.use(VanImage)
export default {
  name: '',
  data () {
    return {
      list: [],
      spans: []
    }
  },
  methods: {
    ite () {
      this.$router.go(-1)
    }
  },
  mounted () {
    const { keywords } = this.$route.params
    getSearch({ keywords }).then(res => {
      this.list = res.data.result.songs
    })
  }
}
</script>

<style lang="scss" scoped>
.seek-box{
  background: #222;
  overflow: auto;
  padding: 0.1rem;
  .seekbox{
    h2{
      font-size: 0.1rem;
      font-weight: normal;
      color: #fff;
    }
  }
  .sekbox-sai{
    margin: 0.2rem;
    line-height: 0.3rem;
    ul{
      text-align: center;
      li{
        margin-top: 0.2rem;
        h2{
          color: #fff;
        }
        p{
          color: rgba(255, 255, 255, 0.459);
        }
      }
    }
  }
}
</style>
